<template>
  <div>
    <Edialog
      :internal="internalDialog"
      :title="addAeditTitle"
      :outershow="addAeditShow"
      saveClick
      @close="addAeditClose"
      @saveFn="addAeditSaveFn"
    >
      <div class="addAedit" style="padding: 0 20px">
        <el-form
          ref="addAeditRef"
          label-width="110px"
          :model="addAeditFrom"
          :rules="addAeditRules"
        >
          <el-form-item label="版本名称" prop="versionName">
            <el-input
              v-model="addAeditFrom.versionName"
              size="medium"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="版本编号" prop="versionCode">
            <el-input
              v-model="addAeditFrom.versionCode"
              size="medium"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="安装包下载地址">
            <div class="da">
              <el-input
                style="margin-right: 10px"
                v-model="addAeditFrom.downAppUrl"
                size="medium"
                placeholder="请输入"
              ></el-input>
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :http-request="uploadFn"
                :limit="1"
                ref="upload"
                :on-success="handleSuccess"
                :show-file-list="false"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="是否强制更新">
            <div style="height: 40px" class="da">
              <el-switch
                style="display: block"
                v-model="addAeditFrom.isForceUpdate"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="是"
                inactive-text="否"
              >
              </el-switch>
            </div>
          </el-form-item>
          <el-form-item label="发布日期">
            <div style="height: 40px" class="da">
              <el-date-picker
                v-model="addAeditFrom.releaseDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </Edialog>
  </div>
</template>

<script>
import Edialog from "@/components/Edialog";
import Eselect from "@/components/Eselect";
import { fd } from "@/utils";
import {
  getVsVersionById,
  putVsVersion,
  postVsVersion,
} from "@/api/management/versioning";
import { postUpload } from "@/api/management/user";
export default {
  name: "edit",
  components: {
    Edialog,
    Eselect,
  },
  props: {
    internalDialog: {
      type: Boolean,
      required: false,
    },
  },
  data() {
    return {
      // 标题
      addAeditTitle: "",
      // 是否显示弹框
      addAeditShow: false,
      // form表单数据
      addAeditFrom: {
        id: "",
        systemAccessId: "",
        versionName: "",
        versionCode: "",
        downAppUrl: "",
        releaseDate: "",
        isForceUpdate: false,
      },
      // from表单校验规则
      addAeditRules: {
        versionName: [{ required: true, message: "请输入", trigger: "change" }],
        versionCode: [{ required: true, message: "请输入", trigger: "change" }],
      },
    };
  },
  methods: {
    // 打开弹框方法
    async openFn(scope) {
      this.addAeditFrom.systemAccessId = scope.systemAccessId;
      if (!scope.id) {
        this.addAeditTitle = "新增";
        this.addAeditShow = true;
        return;
      }
      // 修改
      this.addAeditTitle = "修改";
      let res = await getVsVersionById(scope.id);
      this.addAeditFrom.versionName = res.data.bdata.versionName;
      this.addAeditFrom.versionCode = res.data.bdata.versionCode;
      this.addAeditFrom.downAppUrl = res.data.bdata.downAppUrl;
      this.addAeditFrom.releaseDate = res.data.bdata.releaseDate;
      this.addAeditFrom.isForceUpdate =
        res.data.bdata.isForceUpdate == 1 ? true : false;
      this.addAeditFrom.id = scope.id;
      this.addAeditShow = true;
    },
    // 关闭弹框方法
    addAeditClose() {
      this.addAeditFrom.id = "";
      this.addAeditFrom.systemAccessId = "";
      this.addAeditFrom.versionName = "";
      this.addAeditFrom.versionCode = "";
      this.addAeditFrom.downAppUrl = "";
      this.addAeditFrom.releaseDate = "";
      this.addAeditFrom.isForceUpdate = false;
      this.$refs.addAeditRef.resetFields();
      this.addAeditShow = false;
    },
    // 保存事件
    addAeditSaveFn() {
      this.$refs.addAeditRef.validate(async (valid) => {
        if (valid) {
          let res;
          let obj = JSON.parse(JSON.stringify(this.addAeditFrom));
          obj.isForceUpdate = obj.isForceUpdate ? 1 : 0;
          if (obj.id) {
            res = await postVsVersion(fd(obj));
          } else {
            res = await putVsVersion(fd(obj));
          }
          if (res.data && res.data.bcode == 0) {
            this.$parent.getData();
            this.addAeditClose();
            this.$message.success(res.data.bmsg);
          }
        }
      });
    },
    async uploadFn(file) {
      let FD = new FormData();
      FD.append(`file`, file.file);
      let data = await postUpload(FD);
      if (data.code == 0 && data.data.bcode == 0) {
        this.addAeditFrom.downAppUrl =
          this.$store.getters.baseUrl + data.data.bdata[1];
      }
    },
    handleSuccess(res, file) {
      this.$refs.upload.clearFiles(); //上传成功之后清除历史记录
    },
  },
};
</script>

<style scoped lang="scss"></style>
